<template>
  <el-menu :default-active="activeIndex" class="nav-menu" mode="vertical" @select="handleSelect">
    <el-menu-item index="0">
      <i class="el-icon-s-home"></i>
      <template v-slot:title>
<span >首页</span>
</template>
    </el-menu-item>
    <el-menu-item index="1">
      <i class="el-icon-star-on"></i>
      <template v-slot:title>
<span >餐厅详情</span>
</template>
    </el-menu-item>
    <el-menu-item index="2">
      <i class="el-icon-user"></i>
      <template v-slot:title>
<span >个人中心</span>
</template>
    </el-menu-item>
  </el-menu>
</template>

<script>
export default {
  name: 'NavMenu',
  data() {
    return {
      activeIndex: '0'
    };
  },
  methods: {
    handleSelect(key) {
      this.activeIndex = key;
      switch (key) {
        case '0':
          this.$router.push('/');
          break;
        case '1':
          this.$router.push('/restaurant-detail');
          break;
        case '2':
          this.$router.push('/profile');
          break;
      }
    }
  }
};
</script>

<style scoped>
.nav-menu {
  background-color: #303133; /* 设置背景色 */
  color: white; /* 设置文字颜色 */
  height: 100%; /* 使菜单高度占满整个侧边栏 */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
}

.nav-menu .el-menu-item {
  color: white;
  font-size: 16px;
  font-weight: 500;
  display: flex;
  align-items: center;
  transition: background-color 0.3s;
  padding: 10px 20px; /* 增加内边距 */
  border-radius: 5px; /* 圆角 */
}

.nav-menu .el-menu-item i {
  margin-right: 8px;
}

.nav-menu .el-menu-item span {
  display: inline-block;
  vertical-align: middle;
}

.nav-menu .el-menu-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.nav-menu .el-menu-item.is-active {
  border-left: 4px solid white; /* 左边框表示选中状态 */
}

/* 响应式布局 */
@media (max-width: 768px) {
  .nav-menu {
    padding: 10px;
  }

  .nav-menu .el-menu-item span {
    display: none;
  }

  .nav-menu .el-menu-item i {
    margin-right: 0;
  }
}
</style>